<template>
  <el-card class="content-card">
    <template #header>
      <div class="card-header">
        <h3>最近文件</h3>
        <div class="header-right">
          <el-button type="text" @click="uploadFile" size="small">
            <el-icon :size="16">
              <Upload />
            </el-icon>
            上传文件
          </el-button>
          <el-divider direction="vertical" />
          <el-button type="text" @click="viewAllFiles" size="small">查看全部</el-button>
        </div>
      </div>
    </template>
    <div v-if="recentFiles.length > 0" class="files-container">
      <div
        v-for="(file, index) in recentFiles"
        :key="index"
        class="file-item"
        @click="openFile(file)"
      >
        <div class="file-icon">
          <el-icon :size="20">
            <component :is="getFileIcon(file.type || file.name)" />
          </el-icon>
        </div>
        <div class="file-info">
          <div class="file-name" :title="file.name">{{ file.name }}</div>
          <div class="file-meta">
            <span class="file-size">{{ formatFileSize(file.size) }}</span>
            <span class="file-time">{{ file.upload_time || '刚刚' }}</span>
          </div>
        </div>
        <div class="file-actions">
          <el-dropdown :show-timeout="200">
            <el-button type="text" size="small" class="action-button">
              <el-icon :size="12"><More /></el-icon>
            </el-button>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click.stop="downloadFile(file)">
                  <el-icon :size="14"><Download /></el-icon>
                  下载
                </el-dropdown-item>
                <el-dropdown-item @click.stop="previewFile(file)">
                  <el-icon :size="14"><View /></el-icon>
                  预览
                </el-dropdown-item>
                <el-dropdown-item @click.stop="shareFile(file)" divided>
                  <el-icon :size="14"><Share /></el-icon>
                  分享
                </el-dropdown-item>
                <el-dropdown-item @click.stop="deleteFile(file)" danger>
                  <el-icon :size="14"><Delete /></el-icon>
                  删除
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </div>
    </div>
    <div v-else class="empty-state">
      <el-empty description="暂无文件" :image-size="100" />
    </div>
  </el-card>
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  import { Upload, More, Download, View, Share, Delete } from '@element-plus/icons-vue'
  import { useRouter } from 'vue-router'
  import { ElMessage, ElUpload } from 'element-plus'

  interface FileItem {
    id: string | number
    name: string
    size: number
    type?: string
    upload_time?: string
    url?: string
  }

  interface Props {
    recentFiles: FileItem[]
  }

  const props = defineProps<Props>()
  const router = useRouter()
  const uploadRef = ref<InstanceType<typeof ElUpload>>()

  // 获取文件图标 (使用全局注册的图标名称字符串)
  const getFileIcon = (fileName: string) => {
    const ext = fileName.split('.').pop()?.toLowerCase() || ''

    // 使用通用图标
    if (['pdf', 'doc', 'docx', 'xls', 'xlsx', 'txt', 'csv', 'ppt', 'pptx'].includes(ext)) {
      return 'Document'
    } else if (['jpg', 'jpeg', 'png', 'gif', 'svg', 'mp4', 'avi', 'mov', 'mkv'].includes(ext)) {
      return 'Document'
    } else if (['zip', 'rar', '7z'].includes(ext)) {
      return 'Folder'
    }

    return 'Folder'
  }

  // 格式化文件大小
  const formatFileSize = (size: number): string => {
    if (size < 1024) {
      return size + ' B'
    } else if (size < 1024 * 1024) {
      return (size / 1024).toFixed(1) + ' KB'
    } else if (size < 1024 * 1024 * 1024) {
      return (size / (1024 * 1024)).toFixed(1) + ' MB'
    } else {
      return (size / (1024 * 1024 * 1024)).toFixed(1) + ' GB'
    }
  }

  // 打开文件
  const openFile = (file: FileItem) => {
    if (file.url) {
      window.open(file.url, '_blank')
    } else {
      ElMessage.info('正在打开文件: ' + file.name)
    }
  }

  // 下载文件
  const downloadFile = (file: FileItem) => {
    ElMessage.info('正在下载文件: ' + file.name)
    // 实际项目中这里会调用下载API
    console.log('下载文件:', file)
  }

  // 预览文件
  const previewFile = (file: FileItem) => {
    if (file.url) {
      window.open(file.url, '_blank')
    } else {
      ElMessage.info('正在预览文件: ' + file.name)
    }
  }

  // 分享文件
  const shareFile = (file: FileItem) => {
    ElMessage.info('分享文件: ' + file.name)
    // 实际项目中这里会打开分享对话框
    console.log('分享文件:', file)
  }

  // 删除文件
  const deleteFile = (file: FileItem) => {
    // 由于ElMessage没有confirm方法，使用简单的确认提示
    if (confirm(`确定要删除文件 "${file.name}" 吗？`)) {
      ElMessage.success('文件删除成功')
      // 实际项目中这里会调用删除API并更新列表
      console.log('删除文件:', file)
    } else {
      ElMessage.info('已取消删除')
    }
  }

  // 上传文件
  const uploadFile = () => {
    ElMessage.info('打开文件上传对话框')
    // 实际项目中这里会打开上传对话框
    console.log('上传文件')
  }

  // 查看全部文件
  const viewAllFiles = () => {
    router.push('/files/index').catch(err => {
      ElMessage.error('页面跳转失败')
      console.error('页面跳转失败:', err)
    })
  }
</script>

<style scoped>
  /* 最近文件样式 */
  .content-card {
    height: 100%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    border: none;
  }

  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 500;
  }

  .header-right {
    display: flex;
    align-items: center;
  }

  .files-container {
    max-height: 260px;
    overflow-y: auto;
  }

  .files-container::-webkit-scrollbar {
    width: 4px;
  }

  .files-container::-webkit-scrollbar-thumb {
    background-color: #e0e0e0;
    border-radius: 2px;
  }

  .file-item {
    display: flex;
    align-items: center;
    padding: 12px 0;
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
    transition: all 0.3s ease;
  }

  .file-item:hover {
    background-color: #f8f9fa;
    padding-left: 4px;
  }

  .file-item:last-child {
    border-bottom: none;
  }

  .file-icon {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
    color: #1890ff;
  }

  .file-info {
    flex: 1;
    min-width: 0;
  }

  .file-name {
    font-size: 14px;
    color: #333;
    margin-bottom: 4px;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .file-meta {
    display: flex;
    align-items: center;
    font-size: 12px;
    color: #999;
  }

  .file-size {
    margin-right: 8px;
  }

  .file-actions {
    margin-left: 8px;
  }

  .action-button {
    padding: 4px;
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  .file-item:hover .action-button {
    opacity: 1;
  }

  .empty-state {
    padding: 40px 0;
    text-align: center;
  }

  /* 响应式设计 */
  @media (max-width: 768px) {
    .file-name {
      font-size: 13px;
    }

    .file-meta {
      font-size: 11px;
    }

    .action-button {
      opacity: 1;
    }
  }
</style>
